import React, { Component } from 'react'
import './menu.css'
import { Menu, message } from 'antd'
import { Link, withRouter } from 'react-router-dom';
import { MenuList } from '../../config/menuList';
import { connect } from 'react-redux';
import menuLeftIcon from '../../assets/image/menuLeft.png'
import menuRightIcon from '../../assets/image/menuRight.png'
import menuBg from '../../assets/image/menu-bg.png'
import { reqSiginAskList } from '../../api';
import menuBgSmall from '../../assets/image/menu-bg-small.png'
class AdminMenus extends Component {
    state = {
        collapsed: false,
        menuKey: '',
    }
    panduan = () => {
        const path = this.props.location.pathname;
        if (path.indexOf('/usercenter') >= 0) {
            return true;
        } else {
            return false;
        }
    }
    menuListShow = () => {    // 展示 模块
        return MenuList.map((item, index) => {
            if (this.hasAuth(item)) {
                return (
                    <Menu.Item key={item.key} className={this.state.menuKey === item.key && this.state.collapsed ? 'MenuItem' : ''} icon={<div className='menuIcon'><img src={require(`../../assets/image/menuIcon${index + 1}.png`)} alt="" /></div>}>
                        <Link to={item.key} >
                            {item.title}
                        </Link>
                    </Menu.Item>
                )
            }
        })
    }
    getSiginAskList = async () => {   // 获取未处理的注册请求,判断是否有需要处理的请求   vvvvvvvvvvvvvvvvv
        const org_id = this.props.user.org.org_id;
        const result = await reqSiginAskList(org_id);
        //console.log("获取未审批注册信息",result);
        if (result.code === 200) {
            const count = result.data.length;
            this.setState({
                count
            })
        } else {
            message.error(result.data);
        }
    }
    toggleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    hasAuth = (item) => {  // 判断当前登录用户 对item是否有访问权限,返回值为false（没有权限）/true
        const { key } = item;
        const menus = this.menus;
        const role_name = this.role_name;
        // console.log("权限判断",item,this.menus,this.role_name);
        // 1.如果当前用户是系统admin，返回true
        // 2.如果当前的item是公开的isPublic，返回true
        // 3.当前用户有次权限：key有没有在menus中，如果在menus中，返回true
        if (menus.indexOf(key) !== -1) {
            return true;
        } else {
            return false;
        }
    }
    componentDidMount() {
        window.addEventListener('resize', () => {
            if (document.body.clientWidth < 1300) {
                if (!this.state.collapsed) {
                    this.setState({
                        collapsed: true,
                    });
                }
            } else {
                if (this.state.collapsed) {
                    this.setState({
                        collapsed: false,
                    });
                }
            }
        })
    }
    componentWillMount() {
        const menus = [];
        this.props.user.user_roles && this.props.user.user_roles.map((item) => {
            item.role_menus.map((item) => {
                return menus.push(item.key);
            })
        });
        this.menus = menus;   // 获取 模块权限的 路由数组

        const role_name = [];
        this.props.user.user_roles.map((item) => role_name.push(item.role_name_Zh));
        this.role_name = role_name;    // 获取  角色名称数组

        //this.getroleButtons();
        let role_list = JSON.parse(window.localStorage.getItem("roles_buttons"));
        role_list && role_list.map(item => {
            if (item.key === '/user-mgt') {
                if (item.buttons.length !== 0) {
                    item.buttons.forEach(el => {
                        if (el === 'user-find-processed') {
                            this.getSiginAskList();
                        }
                    })
                }
            }
        })
        if (this.props.location.pathname.includes('/data-show')) {
            this.setState({
                menuKey: '/data-show'
            })
        }
        this.menuListShow();
    };
    componentDidUpdate() {
        if (this.state.menuKey !== this.props.location.pathname) {
            const pathList = ['/data-show/two-dim-show', '/data-show/three-dim-show', '/data-show/data-comparison', '/data-show/original-data']
            if (!pathList.includes(this.props.location.pathname)) {
                this.setState({
                    menuKey: this.props.location.pathname
                })
            }
        }
    }
    render() {
        const { collapsed } = this.state
        return (
            <div className='AdminMenus' style={{ minWidth: collapsed ? 150 + 'px' : '', width: collapsed ? 150 + 'px' : '', backgroundImage: collapsed ? `url(${menuBgSmall})` : `url(${menuBg})` }}>
                <Menu theme="dark" inlineCollapsed={collapsed} selectedKeys={this.state.menuKey}>
                    {this.panduan() ? null : this.menuListShow()}
                </Menu>
                <img src={!collapsed ? menuLeftIcon : menuRightIcon} className="menuBottonIcon" alt="" onClick={this.toggleCollapsed} />
            </div>
        )
    }
}

export default connect(
    state => ({ user: state.user })
)(withRouter(AdminMenus))